<template>
    <div class="app-container">
        <div class="filter-container" style="margin: 10px 0 10px 0;">
            <el-form :model="queryParam" :inline="true" label-width="68px" style="margin-bottom: 8px;">
                <el-input
                        clearable
                        class="filter-item"
                        v-model="queryParam.title"
                        style="width: 150px;"
                        placeholder="请输入博客名"
                ></el-input>
                <el-select
                        clearable
                        v-model="queryParam.mid"
                        class="filter-item"
                        placeholder="请输入分类名"
                        style="width:150px"
                >
                    <el-option
                            v-for="item in sorts.sort"
                            :key="item.mid"
                            :label="item.name"
                            :value="item.mid"
                    ></el-option>
                </el-select>
<!--                    <el-select-->
<!--  n                            v-model="queryParam.tagMid"-->
<!--                            class="filter-item"-->
<!--                            placeholder="请输入标签名"-->
<!--                            style="width:210px"-->
<!--                            filterable-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in tags.tag"-->
<!--                                :key="item.mid"-->
<!--                                :label="item.name"-->
<!--                                :value="item.mid"-->
<!--                        ></el-option>-->
<!--                    </el-select>-->
                <el-select v-model="queryParam.status" clearable placeholder="是否发布" style="width:110px">
                    <el-option  :value="1"></el-option>
                </el-select>
                <el-button style="margin-left: 10px;" class="filter-item" type="primary" icon="el-icon-search" @click="query">查找</el-button>
            </el-form>
            <el-row :gutter="10" style="margin-bottom: 8px;">
                <el-col :span="1.5">
                    <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="addBlog" >添加博客</el-button>
                </el-col>


                <el-col :span="1.5">
                    <el-button class="filter-item" type="danger"  icon="el-icon-delete">删除选中</el-button>
                </el-col>

                <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
            </el-row>
        </div>
        <el-table :data="blogs.blog" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" width="60" align="center">
                <template #default="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="图片" width="160" align="center">
                <template #default="scope">
                    <img :src="scope.row.imgUrl"
                        style="width: 130px;height: 70px;"
                    >
                </template>
            </el-table-column>
            <el-table-column label="标题" width="160" align="center">
                <template #default="scope">
                    <span style="cursor:pointer;">{{ scope.row.title }}</span>
                </template>
            </el-table-column>

            <el-table-column label="分类" width="100" align="center">
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.name"  style="cursor: pointer;">{{scope.row.name}}</el-tag>
                </template>
            </el-table-column>


            <el-table-column label="创建时间" width="200" align="center">
                <template #default="scope">
                    <span>{{scope.row.created}}</span>
                </template>
            </el-table-column>

<!--            <el-table-column label="发布时间" width="200" align="center">-->
<!--                <template #default="scope">-->
<!--                    <span>{{scope.row.publish}}</span>-->
<!--                </template>-->
<!--            </el-table-column>-->


            <el-table-column label="发布状态" width="200" align="center"  >
                <template #default="scope">
                        <el-tag v-if="scope.row.status==1" type="success">发布</el-tag>
                        <el-tag v-if="scope.row.status==0" type="success">草稿</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="允许评论" width="200" align="center" >
                <template #default="scope">
                        <el-tag type="primary"  style="cursor: pointer;" v-if="scope.row.allowComment==1" >是</el-tag>
                        <el-tag type="primary"  style="cursor: pointer;" v-if="scope.row.allowComment==0" >否</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="150">
                <template #default="scope">
                    <el-button  type="primary" size="small" >编辑</el-button>
                    <el-button  type="danger" size="small"  @click="delBlog(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
            <el-pagination
                    @current-change=getArticle
                    :current-page.sync="currentPage"
                    :page-size="PageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </div>
    </div>
</template>

<script>
    import {ref,reactive} from 'vue';
    import {getArticlePage,delArticleById,queryArticle} from '@/api/blogadmin'
    import {getBlogSort }from "@/api/blogsort"
    import { ElMessage } from 'element-plus'
    import { useRouter, useRoute } from 'vue-router';
    export default {
        name: "博客管理",
        setup(){
            const imgUrl= ref('http://img.rui61.cn/images/2020/07/11/1.jpg');
            const current =ref(1);
            const total =ref(0);
            const PageSize=ref(0);
            const blogs= reactive({blog:[]});

            getArticle(1);
            function getArticle(current) {
                getArticlePage(current).then(res=>{
                    total.value = res.data.data.total;
                    PageSize.value =res.data.data.size;
                    blogs.blog =res.data.data.records;
                    console.log( blogs.blog);

                })
            }
            //删除博客
            function delBlog(row) {
                delArticleById(row.aid).then(res=>{
                    const  data=res.data.success;
                    if (data){
                        getArticle(1);
                        ElMessage.success({
                            message: '删除成功',
                            type: 'success'
                        });
                    }else{
                        ElMessage.error('删除失败');
                    }
                })
            }
            //添加博客
            const router = useRouter();
            function addBlog() {
                router.push("/edit")
            }
            // //获取标签
            // const queryTag=reactive({
            //     type:'1',
            // });
            // const tags=reactive({tag:[]})
            // getBlogSort(queryTag).then(res=>{
            //     tags.tag=res.data.data;
            //
            // });

            //获取分类
            const querySort =reactive({
                type:'0',
            });
            const sorts=reactive({ sort:[]})
            getBlogSort(querySort).then(res=>{
                sorts.sort=res.data.data;
                console.log(sorts.sort)
            });
            const queryParam=reactive({
               sortMid:'',tagMid:'',mid:'',title:'',status:'',currentPage:'',type:''
            });
            function query() {
                queryParam.currentPage=current;
                queryArticle(queryParam).then(res=>{
                    blogs.blog = res.data.data.records;
                    total.value = res.data.data.total;
                    PageSize.value =res.data.data.size;

                })
            }
            return {imgUrl,current,total,PageSize,blogs,getArticle,delBlog, sorts,queryParam,query,addBlog}
        }
    }
</script>

<style scoped>

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        margin: 0 0 0 10px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width:  195px;
        height: 105px;
        line-height: 105px;
        text-align: center;
    }
    .imgBody {
        width:  195px;
        height: 105px;
        border: solid 2px #ffffff;
        float: left;
        position: relative;
    }
    .uploadImgBody {
        margin-left: 5px;
        width:  195px;
        height: 105px;
        border: dashed 1px #c0c0c0;
        float: left;
        position: relative;
    }
    .uploadImgBody :hover {
        border: dashed 1px #00ccff;
    }
    .inputClass {
        position: absolute;
    }
    .el-dialog__body {
        padding-top: 10px;
        padding-bottom: 0px;
    }
    .el-dialog {
        min-height: 400px;
    }
    .el-upload__tip {
        margin-top: 10px;
        margin-left: 10px;
        color: #3e999f;
    }

    .upload-demo {
        margin-top: 50px;
    }
    .tipBox {
        margin-bottom: 30px;
    }
    .tip {
        font-size: 14px;
        font-weight: bold;
        color: 	#808080;
    }
    .tipItem {
        line-height: 22px;
        color: 	#A9A9A9;
    }
</style>